<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Bootstrap 实例 - 折叠面板</title>
		<link rel="stylesheet" href="css/fileinput.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
		<link rel="stylesheet" href="css/validation.css" />
		<script src="js/jquery-2.1.0.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
		<script src="js/typelist.js" type="text/javascript"></script>
		<script src="js/fileinput.js"></script>
		<script src="js/jquery.pagination.js"></script>
		<script src="js/zh.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
		<script type="text/javascript">
			$.validator.setDefaults({
				submitHandler: function() {
					$("#addType").click(function() {
						var obj = {
							"name": $("#name").val(),
							"bigTypeName": $("#bt option:selected").text(),
							"logoUrl": $("#key1").val(),
							"logoName": $("#logoName").val(),
							"bigTypeId": $("#bt option:selected").val(),
							"cloId": 1
						}
						$.ajax({
							async: false,
							type: "post",
							url: "/type/save",
							dataType: "json",
							data: obj,
							success: function(response) {
								console.log(obj);
							}
						});
						window.location.reload();
					});
				}
			});
			$(document).ready(function() {
				$("#defaultForm").validate({
					rules: {
						firstname: "required",
						typeName: {
							required: true,
							minlength: 2
						},
						agree: "required"
					},
					messages: {
						firstname: "请输入名称",
						typeName: {
							required: "请输入名称",
						},
					}
				});
				var itemHTML;
				var innertext = "";
				$.ajax({
					url: "/type/findByPage",
					type: "get",
					data: {
						size: 5, //我把行数传回给服务器中
						page: 0 //显示第一页的数据
					},
					dataType: "json",
					success: function(result) {
						console.log(result);
						sumCount = result.data.totalElements;
						count = result.data.pageable.pageSize;
						$.each(result.data.content, function(index, element) {
							$.ajax({
								"url": "/bigType/findById?id=" + element.bigTypeId,
								"type": "get",
								"data": "",
								"async": false,
								"dataType": "json",
								"success": function(c) {
									//                              if(c.data==null){
									//                                  return;
									//                              }else  if(c.data.name!=null){
									//                                  if(innertext.length>0){
									//                                      innertext = innertext+",";
									//                                  }
									//                              }

									if(c == null || c == "") {
										return;
									}
									innertext = c.data.name;
								},
								"error": function() {
									alert("出现错误！");
								}
							});
							var unixTimestamp = new Date(element.createTime);
							commonTime = unixTimestamp.toLocaleString();
							itemHTML = "<tr>" +
								"<td>" +
								"<input type='checkbox' name='item' value=" + element.id + ">" +
								"</td>" +
								"<td>" +
								element.name +
								"</td>" +
								"<td>" +
								innertext +
								"</td>" +
								"<td>" +
								commonTime +
								"</td>" +
								"<td>" +
								"<select class='form-control' id='select'>" +
								"<option value='2'>不推荐</option>" +
								"<option value='1' >类型推荐</option>" +
								"<option value='0' >置顶推荐</option>" +
								"</select>" +
								"</td>" +
								"<td>" +
								"<input type='hidden'  class='hid' value=" + element.id + ">" +
								"<input type='button' name='delete' value='删除' class='btn btn-danger'onclick=\"deleteById('" + element.id + "')\"/>&nbsp;" +
								"<input type='hidden'  class='hid' value=" + element.name + ">" +
								"<input type='button' name='change' value='修改' class='btn btn-info' data-toggle='modal' data-target='#change'onclick=\"getSeatingCarMark('" + element.id + "')\"/>&nbsp;" +
								"<input type='hidden'  class='hid' value=" + element.reco + ">" +
								"<input type='hidden' class='form-control' id='minImage' value=" + element.logoUrl + " />" +
								"</td>" +
								"</<tr>";
							$("#listTable").append(itemHTML);
							switch(parseInt(element.priority)) {
								case 0:
									$("#listTable tr:last-child td option").eq(0).attr("selected", "selected"); //不推荐
									break;
								case 1:
									$("#listTable tr:last-child td option").eq(1).attr("selected", "selected"); //类型
									break;
								case 2:
									$("#listTable tr:last-child td option").eq(2).attr("selected", "selected"); //置顶
									break;
								default:
									$("#priority option").eq(0).attr("selected", "selected"); //默认不推荐
									break;
							}

						});
						itemHTML = "";
						var pageCount = Math.ceil(sumCount / count); //这里50除以10等于5，所以一共有5页
						$('.M-box').pagination({
							pageCount: pageCount,
							jump: true,
							coping: true,
							homePage: '首页',
							endPage: '末页',
							prevContent: '上页',
							nextContent: '下页',
							callback: function(api) {
								console.log(result);
								$.ajax({
									url: "/type/findByPage",
									type: "get",
									data: {
										size: 5, //依然显示10条数据
										page: api.getCurrent() - 1 // 非常关键的一步，这里就要用到api接口的方法中获取当前页
									},
									dataType: "json",
									success: function(result) {
										console.log(result);
										var itemHTML1;
										$.each(result.data.content, function(index, element) {

											$.ajax({
												"url": "/bigType/findById?id=" + element.bigTypeId,
												"type": "get",
												"data": "",
												"async": false,
												"dataType": "json",
												"success": function(c) {
													//                              if(c.data==null){
													//                                  return;
													//                              }else  if(c.data.name!=null){
													//                                  if(innertext.length>0){
													//                                      innertext = innertext+",";
													//                                  }
													//                              }

													if(c == null || c == "") {
														return;
													}
													innertext = c.data.name;
												},
												"error": function() {
													alert("出现错误！");
												}
											});

											var unixTimestamp = new Date(element.createTime);
											commonTime = unixTimestamp.toLocaleString();
											itemHTML1 += "<tr>" +
												"<td>" +
												"<input type='checkbox' name='item' value=" + element.id + ">" +
												"</td>" +
												"<td>" +
												element.name +
												"</td>" +
												"<td>" +
												innertext +
												"</td>" +
												"<td>" +
												commonTime +
												"</td>" +
												"<td>" +
												"<select class='form-control'id='select'>" +
												"<option value='2'>不推荐</option>" +
												"<option value='1' >类型推荐</option>" +
												"<option value='0' >置顶推荐</option>" +
												"</select>" +
												"</td>" +
												"<td>" +
												"<input type='hidden'  class='hid' value=" + element.id + ">" +
												"<input type='button' name='delete' value='删除' class='btn btn-danger'onclick=\"deleteById('" + element.id + "')\"/>&nbsp;" +
												"<input type='hidden'  class='hid' value=" + element.name + ">" +
												"<input type='button' name='change' value='修改' class='btn btn-info' data-toggle='modal' data-target='#change'onclick=\"getSeatingCarMark('" + element.id + "')\"/>&nbsp;" +
												"<input type='hidden'  class='hid' value=" + element.reco + ">" +
												"<input type='hidden' class='form-control' id='minImage' value=" + element.logoUrl + " />" +
												"</td>" +
												"</<tr>";
											$("#listTable").html(itemHTML1);
											switch(parseInt(element.priority)) {
												case 0:
													$("#listTable tr:last-child td option").eq(0).attr("selected", "selected"); //不推荐
													break;
												case 1:
													$("#listTable tr:last-child td option").eq(1).attr("selected", "selected"); //类型
													break;
												case 2:
													$("#listTable tr:last-child td option").eq(2).attr("selected", "selected"); //置顶
													break;
												default:
													$("#priority option").eq(0).attr("selected", "selected"); //默认不推荐
													break;
											}
										});
									}

								});
							}

						});
					}
				});
				$("#upType").click(function() {
		$.confirm({
			title: '提示',
			content: '您是否要对此条数据进行更改?',
			type: 'blue',
			typeAnimated: true,
			buttons: {
				tryAgain: {
					text: '确定',
					btnClass: 'btn-blue',
					action: function() {
						var obj = {
							"id": $("#id").val(),
							"name": $("#namea").val(),
							"bigTypeName": $("#bta option:selected").text(),
							"logoUrl": $("#key2").val(),
							"logoName": $("#logoName2").val(),
							"bigTypeId":$("#bta option:selected").val(),
							"cloId":1
						}
						$.ajax({
							async: false,
							type: "post",
							url: "/type/save",
							dataType: "json",
							data: obj,
							success: function(response) {
							}
						});
						window.location.reload();
					}
				},
				close: function() {
					text: '取消'
				}
			}
		});
	});
			});

			function getSeatingCarMark(element) {
				$.ajax({
					"url": "/type/findById?id=" + element,
					"type": "get",
					"dataType": "json",
					"success": function(result) {
						DisplayListItems(result);
					},
					"error": function() {
						alert("出现错误！");
					}
				});

				function DisplayListItems(result) {
					$("#id").val(result.data.id);
					$("#namea").val(result.data.name);
					//		$("#filea").val(result.data.imgMinUrl);
					$("img").attr("src", "http://p81lqfddq.bkt.clouddn.com/" + result.data.logoUrl);
				}
			}

			function deleteById(element) {
				$.confirm({
					title: '警告',
					content: '您是否要删除此条数据?',
					type: 'red',
					typeAnimated: true,
					buttons: {
						tryAgain: {
							text: '确定',
							btnClass: 'btn-red',
							action: function() {
								$.ajax({
									"url": "/type/deleteById?id=" + element,
									"type": "get",
									"dataType": "json",
									success: function(response) {
										var dd1 = $(this).parent(); //列表框id
										dd1.hide();
										dd1.remove();
										window.location.reload();

									}
								});
							}
						},
						close: function() {
							text: '取消'
						}
					}
				});
			};
		</script>
	</head>

	<body scroll="no">
		<table class="table table-hover table-bordered" id="mytable1">
			<thead>
				<tr>
					<th>选中</th>
					<th>类型名称</th>
					<th>所属大类型</th>
					<th>创建时间</th>
					<th>推荐级别</th>
					<th>操作</th>
				</tr>
				<tr>
					<td><input type="checkbox" onclick="checkAll(this)" /></td>
					<td colspan="3">
						<a href="avascript:void(0)" class="btn btn-danger" role="button" id="delall">全部删除</a>
						<td>
							<select class="form-control" id="priority" style="color: #008000;">
								<option value="-1" selected="selected">请选择</option>
								<option value="0" style="color: #C9302C">不推荐</option>
								<option value="1">类型推荐</option>
								<option value="2">置顶推荐</option>
							</select>
						</td>
						<td colspan="5">
							<button name="add" class="btn btn-primary" data-toggle="modal" data-target="#showadd">
							添加
						</button>
						</td>
					</td>
				</tr>
			</thead>
			<tbody id="listTable">

			</tbody>
		</table>
		<div class="M-box"></div>

		<div class="modal fade bs-example-modal-lg" id="showadd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 800px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
						<h3 class="modal-title" id="myModalLabel">
					类型添加
						</h3>
					</div>
					<div class="modal-body">
						<form enctype="multipart/form-data" id="defaultForm">
							<table class="table table-hover table-bordered" id="mytable2">
								<tr>
									<th>类型名称</th>
									<td><input type="text" class="form-control" id="name" name="typeName" /></td>
								</tr>

								<tr>
									<th>所属大类型</th>
									<td>
										<div class="form-group">
											<select class="form-control" id="bt">

											</select>
										</div>
									</td>
								</tr>
								<tr>
									<th>类型封面</th>
									<td>
										<input id="file1" name="file" type="file" multiple class="file-loading" data-overwrite-initial="false" data-min-file-count="1" />
										<input id="key1" type="hidden" />
										<input id="logoName" type="hidden" />
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<input type="reset" value="重置" class="btn btn-primary" />
										<input type="submit" value="添加" class="btn btn-success" id="addType" />
									</td>
								</tr>
							</table>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>

					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>

		<div class="modal fade bs-example-modal-lg" id="change" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 800px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h3 class="modal-title">
							类型修改
						</h3>
					</div>
					<div class="modal-body">
						<form>
							<table class="table table-hover table-bordered" id="mytable">
								<tr>
									<th>类型名称</th>
									<input type="hidden" value="1" id="id">
									<td><input type="text" class="form-control" id="namea" /></td>
								</tr>
								<tr>
									<th>所属大类型</th>
									<td>
										<div class="form-group">
											<select class="form-control" id="bta">

											</select>
										</div>
									</td>
								</tr>
								<tr>
									<th>类型封面</th>
									<td>
										<input id="filea" name="file" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1" />
										<input id="key2" type="hidden" />
										<input id="logoName2" type="hidden" />
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<input type="reset" value="重置" class="btn btn-primary" />
										<input type="button" value="修改" class="btn btn-success" id="upType" />
									</td>
								</tr>
							</table>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>

					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</body>

</html>